<template>
    <transition name="fadeInDown" @after-leave="$emit('destroy')">
        <div v-show="visible" class="message" @mouseenter="clearTimer" @mouseleave="startTimer">
            <div class="d-flex align-items-center gap-2 px-3 py-2" :class="[classMessage]">
                <svg v-if="type == 'success'" class="bi fs-5"><use href="#check-circle" /></svg>
                <svg v-else-if="type == 'warning'" class="bi fs-5"><use href="#exclamation-circle" /></svg>
                <svg v-else-if="type == 'error'" class="bi fs-5"><use href="#x-circle" /></svg>
                <svg v-else-if="type == 'info'" class="bi fs-5"><use href="#info-circle" /></svg>
                <div>{{ text }}</div>
            </div>
        </div>
    </transition>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'

//const emit = defineEmits(['destroy']);

const props = defineProps(['text', 'type']);

const visible = ref(false)

const classMessage = computed(() => {
    if (props.type == 'success') {
        return 'text-bg-success';
    } else if (props.type == 'warning') {
        return 'text-bg-warning';
    } else if (props.type == 'error') {
        return 'text-bg-danger';
    } else if (props.type == 'info') {
        return 'text-bg-info';
    } else {
        return 'text-bg-info';
    }
})


onMounted(() => {
    startTimer()
    visible.value = true
})

function close() {
    visible.value = false;
}

let timer = null;
function clearTimer() {
    clearTimeout(timer);
}

function startTimer() {
    timer = setTimeout(() => {
        close();
    }, 5000);
}
</script>

<style scoped>
.message {
    z-index: 1060;
    position: fixed;
    top: 0.5rem;
    left: 50%;
    width: fit-content;
    max-width: 75%;
    transform: translateX(-50%);
    transition: opacity 0.3s, transform .4s;
}

.fadeInDown-enter-from,
.fadeInDown-leave-to {
    opacity: 0;
    transform: translate(-50%, -100%);
}
</style>